 <link rel="stylesheet" href="https://rawgit.com/tastejs/todomvc/gh-pages/architecture-examples/angularjs/bower_components/todomvc-common/base.css">
<div id="todoapp"></div>
<footer id="info">
      <p>Double-click to edit a todo</p>
      <p>Created by @leeluolee</a></p>
      <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script id="todo" type="template/regular" name="todo">
  <li  r-class="{'completed': todo.completed, 'editing': todo.editing}">
    <div class="view">
      <input class="toggle" type="checkbox" r-model={{ todo.completed }}>
        <label on-dblclick={{todo.editing = true}}>{{ todo.description }}</label>
        <button on-click={{ this.$emit('remove', todo_index) }} class="destroy"></button>
        </div>
      <input id="edit" class="edit" on-enter={{ todo.editing = false }} r-model={{todo.description}} autofocus>
  </li>
</script>
 <script id="application" type="template/regular">
      <div>
        <h1>regular-todo</h1>
        <input id="new-todo" on-enter={{ this.newTodo(editTodo) }} placeholder="What needs to be done?" r-model={{ editTodo }}>
      </div>
      {{#if !!items.length}}
        <section id="main">
          <!-- why not use r-model directly, beacuse the expression have not set function, so use checked with on-change -->
          <input id="toggle-all" type="checkbox" name='toggle' on-change={{this.toggleAll(items.length === this.getList('completed').length)}} checked={{items.length === this.getList('completed').length }}>
          <label for="toggle-all">Mark all as complete</label>
          <ul id="todo-list">
            {{#list this.getList(filter) as i}}
            <todo todo={{i}} on-remove={{this.remove(i_index)}} />
            {{/list}}
          </ul>
        </section>
        <footer id="footer">
          <span id="todo-count">
            <strong>{{ this.getList('active').length }}</strong> {{ this.getList('active').length === 1 ? 'item' : 'items' }} left
          </span>
          <ul id="filters">
            <li><a class="{{ filter === 'all'? 'selected' : '' }}"  href="javascript:;" on-click={{filter='all'}}>All</a></li>
            <li><a class="{{ filter === 'active'? 'selected' : '' }}" href='javascript:;' on-click={{filter = 'active'}}>Active</a></li>
            <li><a class="{{ filter === 'completed'? 'selected' : '' }}" href="javascript:;" on-click={{filter = 'completed'}}>Completed</a></li>
          </ul>
          {{#if this.getList('completed').length > 0 }}
            <button id="clear-completed" on-click={{this.clearCompleted()}}>Clear completed ({{ this.getList('completed').length }})</button>
          {{/if}}
        </footer>
      {{/if}}
    </script>

<script src="https://rawgit.com/regularjs/regular/master/dist/regular.js"></script>

<script>
  

</script>
    

<script src="../../dist/regular.js"></script>

<script>
  
  var Todo = Regular.extend({
    data: {},
    template: "#todo",
    init: function(){}
  });
  

  var TodoApp = Regular.extend({
    template: '#application', // id | template string | preparsed ast
    init: function(){
      // call parent.init function ()
      // this.supr();
      var data = this.data;
      // localStorage
      if(window.localStorage){
        this.$on('update', function(){
          localStorage.setItem('items',JSON.stringify(this.data.items))
        })
      }
    },
    // get the list;
    getList: function(filter){
      if(!filter || filter === 'all') return this.data.items;
      else return this.data.items.filter(function(item){
        return filter === 'completed'? item.completed : !item.completed;
      });
    },
    // toggle all todo's completed state
    toggleAll: function(sign){
      this.data.items.forEach(function(item){
        return item.completed = !sign;
      });
    },
    // clear all compleled
    clearCompleted: function(){
      this.data.items = this.data.items.filter(function(item){
        return !item.completed
      });
    },
    // create a new todo
    newTodo: function(editTodo){
      var data = this.data;
      data.items.unshift({description: editTodo});
      data.editTodo = "";
    },
    // remove a todo
    remove: function(index){
      this.data.items.splice(index,1); 
    }
  })
  
  // // localStorage stuff
  if(window.localStorage && window.JSON){
    var items = localStorage && localStorage.getItem('items');
    items = JSON.parse(items);
  }

  
  var todo = new TodoApp({data: {
    filter:"all",
    items: items || []
  }});


  todo.inject('#todoapp')
</script>